<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>滑动导航</title>
    <script src="./js/vue.min.js"></script>
    <style>
      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }

      ul {
        padding: 0;
        list-style: none;
        display: flex;
      }

      /* 滚动文本样式 */
      .marquee {
        width: 100%;
        height: 50px;
        align-items: center;
        color: #3a3a3a;
        background-color: #ffe4ca;
        display: flex;
      }

      .marquee_title {
        padding: 0 20px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        border-right: 1px solid #fff;
      }

      .marquee_box {
        display: block;
        position: relative;
        width: 60%;
        height: 30px;
        overflow: hidden;
      }

      .marquee_list {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
      }

      .marquee_top {
        transition: all 0.5s;
        margin-top: -30px;
      }

      .marquee_list li {
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        padding-left: 20px;
      }

      .marquee_list li span {
        padding: 0 2px;
      }

      .red {
        color: #ff0101;
      }

      /* 导航样式 */
      #menu {
        width: 100%;
        background: #024067;
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
        padding: 0 10%;
      }

      #menu ul {
        display: flex;
        position: relative;
      }

      #menu ul li {
        flex: 1;
        height: 40px;
        line-height: 40px;
        color: #fff;
        font-size: 14px;
        cursor: pointer;
        text-align: center;
        z-index: 2;
      }

      .menubg {
        position: absolute;
        background: #8f0000;
        height: 40px;
        top: 0;
        z-index: 1;
        transition: all 0.4s;
        left: 0;
      }

      .info {
        text-align: center;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <!-- 滚动文本 -->
      <div class="marquee">
        <div class="marquee_title">
          <span>最新公告</span>
        </div>
        <div class="marquee_box">
          <ul class="marquee_list" :class="{marquee_top:animate}">
            <li v-for="(item, index) in marqueeList" ::key="index">
              <span class="red">{{item.name}}</span>
              <span>-</span>
              <span>年薪</span>
              <span class="red"> {{item.money}}</span>
              <span>万</span>
            </li>
          </ul>
        </div>
      </div>

      <!-- 导航 -->
      <div id="menu">
        <ul>
          <li
            v-for="(item,index) in menulist"
            :key="index"
            @click="movebg(item,index)"
          >
            {{item.title}}
          </li>
          <div class="menubg"></div>
        </ul>
      </div>
      <div class="info">选中的ID为：{{id}}</div>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          id: 1, //保存的id值
          menulist: [ //导航列表
            {
              title: "Web",
              value: 1,
            },
            {
              title: "Java",
              value: 2,
            },
            {
              title: "PHP",
              value: 3,
            },
            {
              title: "C++",
              value: 4,
            },
            {
              title: "其他",
              value: 5,
            },
          ],
          animate: false, //是否加载动画
          marqueeList: [ //文本列表
            {
              name: "Web",
              money: "999",
            },
            {
              name: "Java",
              money: "999",
            },
            {
              name: "PHP",
              money: "999",
            },
            {
              name: "C++",
              money: "999",
            },
          ],
        },
        mounted() {
          //定时调用滚动方法
          setInterval(this.showMarquee, 2000);
          //获取li的宽度
          let liWidth = document.querySelectorAll("#menu li")[0];
          //背景
          let bgWidth = document.querySelector(".menubg");
          //设置背景的宽度
          bgWidth.style.width = liWidth.offsetWidth + "px";
        },
        methods: {
          //滚动
          showMarquee() {
            this.animate = true;
            setTimeout(() => {
              this.marqueeList.push(this.marqueeList[0]);
              this.marqueeList.shift();
              this.animate = false;
            }, 500);
          },
          //背景移动
          movebg(item, index) {
            let menuBg = document.querySelector(".menubg");
            //获取选择li的左边到屏幕的长度
            let liLeft = document.querySelectorAll("#menu li")[index]
              .offsetLeft;
            console.log(liLeft);
            menuBg.style.left = liLeft + "px";
            this.id = item.value;
          },
        },
      });
    </script>
  </body>
</html>
